<!--
 * @description: 
 * @Author: vikingShip
 * @Date: 2021-12-27 18:16:51
 * @LastEditors: vikingShip
 * @LastEditTime: 2021-12-29 17:03:02
-->
<template>
  <div>
    <el-table :data="paymentConfig" :row-style="{ height: '80px' }">
      <el-table-column label="渠道名称" align="left">
        <template slot-scope="scope">
          {{ scope.row.payType === "WECHAT" ? "微信支付" : "支付宝支付" }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="right">
        <template slot-scope="scope">
          <el-button @click="setPayConfig(scope.row)">配置</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :visible.sync="dialogVisible"
      width="600px"
      center="center"
    >
      <div slot="title">
        {{ currentInfo.payType === "WECHAT" ? "微信支付" : "支付宝支付" }}
      </div>
      <el-form
        ref="payForm"
        :rules="payFormRules"
        :model="currentInfo"
        label-width="100px"
      >
        <el-form-item label="appId" prop="appid">
          <el-input
            v-model="currentInfo.appid"
            placeholder="请输入应用ID"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="商户号"
          prop="mchId"
          v-if="currentInfo.payType === 'WECHAT'"
        >
          <el-input
            v-model="currentInfo.mchId"
            placeholder="请输入商户号"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="商户密钥"
          prop="keyPrivate"
          v-if="currentInfo.payType === 'WECHAT'"
        >
          <el-input
            v-model="currentInfo.keyPrivate"
            placeholder="请输入商户密钥"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="支付证书"
          prop="keyCert"
          v-if="currentInfo.payType === 'WECHAT'"
        >
          <el-upload
            action=""
            ref="uploadFile"
            :http-request="uploadFile"
            :auto-upload="true"
            :show-file-list="false"
          >
            <el-button
              type="text"
              style="color: #67c23a"
              size="small"
              v-if="currentInfo.keyCert"
            >
              已上传
            </el-button>
            <el-button type="text" size="small" v-if="!currentInfo.keyCert"
              >未上传
            </el-button>
            <el-button type="primary">上传</el-button>
            <div slot="tip" class="el-upload__tip">
              微信商户平台，微信支付API证书
            </div>
          </el-upload>
        </el-form-item>
        <!-- 支付宝 -->
        <el-form-item
          label="支付宝私钥"
          prop="keyPrivate"
          v-if="currentInfo.payType === 'ALIPAY'"
        >
          <el-input
            v-model="currentInfo.keyPrivate"
            placeholder="请输入支付宝私钥"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="支付宝公钥"
          prop="keyPublic"
          v-if="currentInfo.payType === 'ALIPAY'"
        >
          <el-input
            v-model="currentInfo.keyPublic"
            placeholder="请输入支付宝公钥"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="savePayForm">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script lang='ts'>
import { Component, Vue, Ref } from "vue-property-decorator";
import {
  getPaymentConfig,
  uploadCertificate,
  savePaymentConfig,
} from "@/api/businessCenter/setting";

type PayFormType =
  | "appid"
  | "mchId"
  | "keyPrivate"
  | "keyCert"
  | "keyPublic"
  | "mchKey"
  | "cert"
  | "payType";

@Component
export default class Payment extends Vue {
  paymentConfig = [];
  dialogVisible = false;
  currentInfo: Partial<Record<PayFormType, string>> = {
    appid: "",
    mchId: "",
    keyPrivate: "",
    keyCert: "",
    keyPublic: "",
  };
  payFormRules = {
    appid: [{ required: true, message: "请填写应用ID", trigger: "blur" }],
    mchId: [{ required: true, message: "请填写商户号", trigger: "blur" }],
    keyPrivate: [{ required: true, message: "请填写密钥", trigger: "blur" }],
    keyCert: [{ required: true, message: "请上传证书", trigger: "blur" }],
    keyPublic: [{ required: true, message: "请填写公钥", trigger: "blur" }],
  };
  @Ref()
  readonly payForm: HTMLFormElement;
  created() {
    // try {
    //   const response = await getPaymentConfig({
    //     code: cd || "",
    //     type,
    //   });
    //   console.log("response", response);
    //   const { code, data } = response;
    //   if (code === 200) {
    //     Object.assign(this.paymentConfig, data[1]);
    //   }
    // } catch (e) {
    //   this.$message({
    //     message: e,
    //     type: "warning",
    //   });
    // }
    this.getPayConfig();
  }
  async getPayConfig() {
    try {
      const response = await getPaymentConfig({
        code: "",
        type: "1",
      });
      const { code, data } = response;
      if (code === 200) {
        this.paymentConfig = data;
      }
    } catch (e) {
      this.$message({
        message: e,
        type: "warning",
      });
    }
  }
  setPayConfig(info) {
    Object.assign(this.currentInfo, info);
    this.dialogVisible = true;
  }
  /**
   * 上传支付证书
   */
  async uploadFile(file) {
    try {
      const response = await uploadCertificate({
        file: file.file,
      });
      const { code, data } = response;
      if (code === 200) {
        this.$message({
          message: "上传成功",
          type: "success",
        });
        this.currentInfo.keyCert = data;
        // this.currentInfo.certificatesState = true;
        // this.currentInfo.certificatesPath = data;
      }
    } catch (e) {
      this.$message({
        message: e,
        type: "warning",
      });
    }
  }
  /**
   * @LastEditors: vikingShip
   * @description: 保存支付配置
   */
  async savePayForm() {
    try {
      await this.payForm.validate();
      const { code } = await savePaymentConfig(this.currentInfo);
      if (code === 200) {
        this.$message({
          message: "保存成功",
          type: "success",
        });
        this.dialogVisible = false;
      } else {
        this.$message({
          message: "保存失败",
          type: "success",
        });
      }
    } catch (e){
      console.log(e)
    }
  }
}
</script>
<style lang="scss" scoped>
.pay__table {
  height: 60px;
  background: red;
}
</style>